<template>
    <div class="login-page">
      <h2 style="font-size: 30px; margin-top: 15px; font-weight: bold; color: #ffaad5;">花店登录</h2>
      <form @submit.prevent="login">
        <div class="form-group">
          <label for="username">用户名：</label>
          <input type="text" id="username" v-model="username" style="width: 300px;">
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="password" style="width: 300px;">
        </div>
        <button type="submit"><router-link to="/Users" >登录</router-link></button>
      </form>
      <p>还没有账号？<router-link to="/register" >注册</router-link></p >
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '瑜归',
        password: '13251',
      };
    },
    methods: {
      login() {
      
        console.log('尝试登录：', this.username, this.password);
      
      },
      goToRegister() {
        this.$router.push('/register');
      },
    },
  };
  </script>
  
  <style scoped>
  .login-page {
    padding: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    font-weight: bold;
  }
  input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  a {
    color: blue;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  </style>